<template>
	<view>
		<view class="header">
			<image src="../../static/images/login/bg.png" mode="" class="bg"></image>
			<view class="water-group">
				<view class="water water1" style="background-image: url(../../static/images/wave/wave.png);"></view>
				<view class="water water2" style="background-image: url(../../static/images/wave/wave.png);"></view>
				<view class="water water3" style="background-image: url(../../static/images/wave/wave.png);"></view>
			</view>
		</view>

		<view class="form">
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<uni-forms-item name="username">
					<uni-icons type="person" class="icon" color="#ade1bf" size="20"></uni-icons>
					<input class="input" v-model="formData.username" type="text" placeholder="用户名"
						@input="binddata('username',$event.detail.value)" />
				</uni-forms-item>

				<uni-forms-item name="password" v-if="ispasswordshow">
					<uni-icons type="locked" class="icon" color="#a5d9bf" size="20"></uni-icons>
					<input class="input" v-model="formData.password" type="text" placeholder="密码"
						@input="binddata('password',$event.detail.value)" />
					<uni-icons type="eye" size="20" color="#cacaca" class="icon-eye"
						@click="ispasswordshow = !ispasswordshow"></uni-icons>
				</uni-forms-item>
				<uni-forms-item name="password" v-else>
					<uni-icons type="locked" class="icon" color="#a5d9bf" size="20"></uni-icons>
					<input class="input" v-model="formData.password" type="text" placeholder="密码"
						@input="binddata('password',$event.detail.value)" password />
					<uni-icons type="eye-slash" size="20" color="#cacaca" class="icon-eye"
						@click="ispasswordshow = !ispasswordshow"></uni-icons>
				</uni-forms-item>
			<!-- 	<uni-forms-item name="authCode">
					<input class="input last" v-model="formData.authCode" type="text" placeholder="验证码"
						@input="binddata('authCode',$event.detail.value)" />
					<image :src="AuthCode.img_url" mode="" @click="getAuthCode"></image>
				</uni-forms-item> -->
			</uni-forms>
			<button @click="submit">登录</button>
		</view>

		<view class="bottom">
			<view class="register" @click="goregister">
				微信登录
			</view>

			<view class="forget" @click="showModal">
				忘记密码
			</view>
		</view>

	</view>
</template>

<script>
	import {WXLogin}from'./wxLogin.js'
	export default {
		data() {
			return {
				ispasswordshow: false,
				AuthCode: {},
				signUserInfo: [],
				formData: {
					username: '',
					password: '',
					authCode: ''
				},
				rules: {
					username: {
						rules: [{
								required: true,
								errorMessage: '请输入用户名',
							},
							{
								minLength: 3,
								maxLength: 20,
								errorMessage: '用户名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					password: {
						rules: [{
								required: true,
								errorMessage: '请输入密码',
							},
							{
								minLength: 8,
								errorMessage: '密码长度最少{minLength}个字符',
							}
						]
					},
					authCode: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码',
						}]
					}
				}
			}
		},
		onLoad() {
			this.getAuthCode()
			this.getSignUserInfo()
		},
		methods: {
			async getAuthCode() {
				const {
					data: res
				} = await uni.$http.get('/authCode/getAuthCode')
				this.AuthCode = res.data
			},
			async getSignUserInfo() {
				const res = await uni.$http.post('/user/getSignUserInfo')
				this.signUserInfo = res.data.data
			},
			submit() {
				this.$refs.form.validate().then(async res => {
					// res.authCodeKey = this.AuthCode.authCodeKey
					// const response = await uni.$http.post('/user/loginUser', res)
					// if (response.statusCode == 802) {
					// 	this.getAuthCode()
					// 	if (response.data.msg == '验证码错误') {
					// 		uni.showToast({
					// 			title: '验证码错误',
					// 			icon: 'error'
					// 		})
					// 	}
					// 	if (response.data.msg == '账号/密码错误') {
					// 		uni.showToast({
					// 			title: '账号/密码错误',
					// 			icon: 'error'
					// 		})
					// 	}
					// }
					// if (response.statusCode == 200) {
						// uni.setStorageSync('token', response.data.data.token)
						uni.setStorageSync('token', 'textkey')
						// this.$store.commit('initUserInfo', response.data.data)
						uni.showToast({
							title: '登录成功',
							success() {
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/index/index'
									})
								}, 500)
							}
						})
					// }
				}).catch(err => {
					console.log('表单误信息：', err);
				})
			},
			showModal() {
				uni.showModal({
					title: '忘记密码',
					content: '请联系QQ：1815846446',
					showCancel: false,
					confirmColor: '#3fa1c2'
				})
			},
			goregister() {
			WXLogin()
			},
			loadfont() {
				uni.loadFontFace({
					family: 'ele',
					source: `url('/static/font/ele.TTF')`,
					success() {

					},
					fail(res) {

					}
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #fff;
	}

	.header {
		position: relative;

		.bg {
			width: 100%;
			height: 600rpx;
		}

		.water-group {
			position: absolute;
			bottom: 0;
			height: 110px;
			width: 100%;
			overflow: hidden;
			background: linear-gradient(to bottom, #66c2a9, #fff);
		}

		.water-group .water {
			position: absolute;
			width: 200%;
			height: 100%;
			background-size: 100% 100%;
		}

		.water-group .water1 {
			top: 20px;
			left: -100%;
			opacity: 0.2;
			animation: water-right 20s infinite linear;
		}

		.water-group .water2 {
			top: 30px;
			left: 0;
			opacity: 0.3;
			animation: water-left 30s infinite linear;
		}

		.water-group .water3 {
			top: 45px;
			left: -100%;
			animation: water-right 40s infinite linear;
		}

		@keyframes water-right {
			0% {
				transform: translateX(0) translateZ(0) scaleY(1)
			}

			50% {
				transform: translateX(25%) translateZ(0) scaleY(0.85)
			}

			100% {
				transform: translateX(50%) translateZ(0) scaleY(1)
			}
		}

		@keyframes water-left {
			from {
				transform: translate(0%, 0px);
			}

			to {
				transform: translate(-50%, 0px);
			}
		}
	}

	.form {
		margin-top: 30rpx;
		padding-left: 90rpx;
	}

	.uni-forms-item {
		position: relative;

		image {
			position: absolute;
			top: 40rpx;
			right: 95rpx;
			width: 160rpx;
			height: 60rpx;
			margin-left: 40rpx;
		}

		.input {
			width: 500rpx;
			height: 100rpx;
			padding-left: 70rpx;
			border-bottom: 1px solid #ccc;
			font-size: 32rpx;

			&.last {
				display: inline-block;
				vertical-align: middle;
				width: 300rpx;
			}
		}

		.icon-eye {
			position: absolute;
			top: 30rpx;
			right: 130rpx;
			z-index: 999;
		}

		.icon {
			position: absolute;
			top: 30rpx;
			left: 10rpx;
			z-index: 999;
		}
	}

	button {
		width: 570rpx;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		font-size: 38rpx;
		color: #fff;
		background-color: #66c2a9;
		border-radius: 50rpx;
		margin-top: 60rpx;
		margin-left: 0rpx;
	}

	.bottom {
		display: flex;
		width: 500rpx;
		justify-content: space-between;
		margin: 70rpx auto 30rpx;
		font-size: 30rpx;
	}
</style>
